<template>
  <div class="list-div">
  <el-form-item :label="lable" prop="imgs">
    <el-upload
      :file-list="imgs"
      list-type="picture-card"
      class="upload-demo"
      :action="this._uploadurl_"
      :headers="this.headers"
      :on-success="handleAvatarSuccess"
      :on-preview="handlePictureCardPreview"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :limit="limit"
      :on-exceed="limiterror"
    >
      <!--<el-button size="small" type="primary">点击上传</el-button>-->
      <i class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>

  <el-dialog :visible.sync="showIconDialog" :append-to-body="true" :title="showTitle" z-index="1000">
    <img width="100%" :src="showIcon" alt="">
  </el-dialog>

  </div>
</template>

<script>
  import common from "../utils/common"

  export default {
    components: {

    },
    name: 'FileUpload',
    props: ['lable','imgs','limit'],
    data () {
      return {
        rules: {
          fileList: [
            { required: true, message: '请上传文件', trigger: 'blur' },
          ],
        },

        _uploadurl_,
        headers:{
          token: window.vm.$cookies.get('token')
        },

        showIconDialog:false,
        showIcon:'',
        showTitle:''
      }
    },
    methods: {

      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除图片？`);
      },
      handleAvatarSuccess(res, file,fileList) {
//        this.fileList = common.parseFilePath(fileList)
        this.$emit("changeFiles",common.parseFilePath(fileList))
        this.$emit("uploadSuccess",common.parseFilePathSign(file))
      },
      handleRemove(file, fileList) {
//        this.fileList = common.parseFilePath(fileList)
        this.$emit("changeFiles",common.parseFilePath(fileList))
        this.$emit("removeFile",common.parseFilePathSign(file))
      },
      limiterror(){
        this.$message.error('文件上传'+this.limit+'个，请删除后再上传')
      },

      handlePictureCardPreview(file) {
        this.showIconDialog = true;
        if (file.response){
          // 新增时
          this.showIcon=file.response.data.url
          this.showTitle=file.response.data.name
        } else {
          // 修改时
          this.showIcon=file.url
          this.showTitle=file.name
        }

      },

      init () {
        this._uploadurl_ = _uploadurl_
      }
    },
    mounted: function () {
    },
    created: function () {
      this.init()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
